<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增虚拟接口下数据集及字段')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-relation-edit" th:object="${interfaceParamsFieldRelation}">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="type" th:field="*{type}" class="form-control" type="hidden">
            <input name="interfaceId" th:field="*{interfaceId}" class="form-control" type="hidden">
            <input name="isInParam" th:field="*{isInParam}" class="form-control" type="hidden">
            <div class="form-group field">
                <label class="col-sm-3 control-label is-required">字段：</label>
                <div class="col-sm-8">
                    <select id="objectId" name="objectId" class="form-control m-b" required>

                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">排序：</label>
                <div class="col-sm-8">
                    <input name="sortNum" class="form-control" type="number" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />

    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "interfaceParamsFieldRelation/relation";
        $("#form-relation-edit").validate({
            focusCleanup: true
        });
        var fieldInfoList = [[${fieldInfoList}]];
        function submitHandler() {
            if ($.validate.form()) {
                var config = {
                    url: prefix + "/addVUParam",
                    type: "post",
                    dataType: "json",
                    data: $('#form-relation-edit').serialize(),
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success: function(result) {
                        var parent = window.parent;
                        var isInParam = $("#isInParam").val();
                        if (isInParam == 2) {
                            parent.$("#bootstrap-table-out").bootstrapTreeTable('refresh');
                        } else {
                            parent.$("#bootstrap-table-in").bootstrapTreeTable('refresh');
                        }
                        $.modal.close();
                    }
                };
                $.ajax(config);
            }
        }
        $(function () {
            if (fieldInfoList && fieldInfoList.length > 0) {
                for (var i=0; i<fieldInfoList.length; i++) {
                    $("#objectId").append('<option value="'+fieldInfoList[i].id+'">'+fieldInfoList[i].fieldEnName + '('+fieldInfoList[i].fieldName+')</option>')
                }
            }

            $("#objectType").change(function() {
                if ($(this).val() == '1') {
                    $(".field").show();
                    $(".params").hide();
                } else {
                    $(".field").hide();
                    $(".params").show();
                }
            });

            $("#tableId").change(function() {
                $("#objectId").empty();
                $("#statusId").empty();
                var config = {
                    url: prefix + '/selectFieldByTableId?tableId='+$(this).val(),
                    type: "post",
                    dataType: "json",
                    data: null,
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            if(result.data && result.data.length > 0) {
                                for (var i=0; i<result.data.length; i++) {
                                    $("#objectId").append('<option value="'+result.data[i].id+'">'+result.data[i].fieldEnName + '('+result.data[i].fieldName+')</option>')
                                }

                                // TODO loadStatusID
                            }
                        }
                    }
                };
                $.ajax(config)
            })
        });
    </script>
</body>
</html>